<!--
 * @Descripttion: 鄂州市梁子湖区劳动监察指挥中心
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-07-08 12:00:46
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-08-04 17:21:14
-->
<template>
  <div :class="!isFullScreen ? 'chart' : 'fullScreen'">
    <ul :class="!isFullScreen ? 'chartHeader' : 'chartHeaderFullScreen'">
      <li
        :class="
          !isFullScreen
            ? 'chartHeaderArea choseArea'
            : 'chartHeaderAreaFullScreen choseArea'
        "
      >
        <el-cascader
          size="mini"
          v-model="areaArry"
          :props="{ checkStrictly: true }"
          ref="cascader"
          placeholder="请选取区域"
          :options="cityOptions"
          @change="handleChange"
          popper-class="currentCascaderStyle"
          filterable
        ></el-cascader>
      </li>
      <li
        :class="!isFullScreen ? 'chartHeaderDate' : 'chartHeaderDateFullScreen'"
      >
        <div class="currentDate" style="float: left">
          <span>{{ currentTime }}</span>
          <span style="margin-left: 10px">{{ currentDate }}</span>
        </div>
        <div
          @click="isFullScreen = !isFullScreen"
          style="margin-left: 20px; cursor: pointer"
          :class="[
            isFullScreen
              ? 'fullScreenIcon actived suoxiao'
              : 'fullScreenIcon actived quanping',
          ]"
        >
          <!-- <i class="icon iconfont icondaping-suoxiao" v-if="isFullScreen"></i>
          <i class="icon iconfont icondaping-quanping" v-else></i> -->
        </div>
      </li>
      <li v-if="isFullScreen" class="chartHeaderTitle">
        <span class="eZhouTitle">{{ screenTitle }}</span>
      </li>
    </ul>
    <overView
      :area="area"
      :investmentType="investmentType"
      :isFullScreen="isFullScreen"
    ></overView>
  </div>
</template>
<script>
import overView from './overView'
import common from '../../kits/common'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'index',
  components: {
    overView,
  },
  data() {
    return {
      screenTitle: '鄂州市梁子湖区劳动监察指挥中心',
      isFullScreen: false,
      bussiness: {},
      cityOptions: [],
      active: '',
      area: '',
      countryArea: '',
      currentTime: '',
      currentDate: '',
      investmentType: '',
      investmentTypeOptions: [],
      time: '',
      screenWidth: window.screen.width, // 屏幕宽
      screeHeight: window.screen.height,
      screenTotalCalss: 'bussinessTotal',
      isEnShi: false,
      canChange: true,
    }
  },
  created() {
    this.getTime()
    this.getScreenTitle()
    this.isEnShi = this.isEsUser()
    this.area = this.$store.state.areaInfoArr.areaId
    this.getAreaData()
  },
  activated() {
    let str = this.active
    this.active = null
    setTimeout(() => {
      this.active = str
    }, 10)
  },
  mounted() {
    this.getTypeList()
    const windowWidth = window.screen.width
    if (windowWidth <= 1440) {
      this.isFullScreen = true
    }
  },
  watch: {
    isFullScreen(val) {
      let currentActive = this.active
      this.active = 0
      setTimeout(() => {
        this.active = currentActive
      }, 50)
    },
    areaArry(val) {
      const areas = val[val.length - 1]
      this.area = areas
    },
  },
  computed: {
    ...mapState(['areasOptions', 'investmentOptions']),
    areaArry() {
      return this.$store.getters.changeArea
    },
  },
  methods: {
    /**
     * @description: 获取标题
     */
    getScreenTitle() {
      this.axios({
        method: 'post',
        url: 'api-r/ezrightbackpay/expand/getHeadLine',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              if (response.data.result.value) {
                this.screenTitle = response.data.result.value
              }
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.$message({
              message: '数据请求失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    getTime() {
      setInterval(this.getCurrentTime, 1000)
    },
    /**
     * @description: 获取当前时间
     */
    getCurrentTime() {
      var now = new Date()
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      var day = now.getDate()

      var hours = now.getHours() //小时 ,返回 Date 对象的小时 (0 ~ 23)
      var minutes = now.getMinutes() //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
      var seconds = now.getSeconds() //秒 ,返回 Date 对象的秒数 (0 ~ 59)

      var time = year + '-' + common.pad(month) + '-' + common.pad(day)

      var currentDate =
        hours + ':' + common.pad(minutes) + ':' + common.pad(seconds)

      this.currentTime = time

      this.currentDate = currentDate
    },
    changeActive(index) {
      let that = this
      if (this.canChange) {
        this.active = index
        this.canChange = false
        setTimeout(() => {
          that.canChange = true
        }, 1000)
      }
    },
    getCountryData() {
      let that = this
      this.axios
        .post('/api-bs/areadic/base/areas', { belongs: 2, areaId: 420702 })
        .then((res) => {
          if (!res.data.hasError) {
            let arr = res.data.result
            let countryArr = [
              {
                label: '全国',
                level: 0,
                parentId: '0',
                value: '2',
                children: arr,
              },
            ]
            this.cityOptions = countryArr
            const { label, value } = countryArr[0]
            this.$store.commit('SET_INFO', [
              'changeArea',
              [{ areaId: value, label: label }],
            ])
          }
        })
    },
    getAreaData() {
      let that = this
      this.axios.post('/api-bs/areadic/base/areabyscreen').then((res) => {
        if (!res.data.hasError) {
          //删除乡镇一级数据
          let arr = res.data.result
          this.cityOptions = arr
          const { label, value } = res.data.result[0]
          this.$store.commit('SET_INFO', [
            'changeArea',
            [{ areaId: value, label: label }],
          ])
        }
      })
    },
    deleteChildren(arr) {
      if (arr.children) {
        arr.children.forEach((m) => {
          if (m.value.length == 6) {
            delete m.children
          } else {
            this.deleteChildren(m)
          }
        })
      }
    },
    getTypeList() {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findstatusbytype',
        data: { type: 'PROJECT_INVESTMENT' },
      }).then((res) => {
        if (!res.data.hasError) {
          res.data.result.unshift({ code: '', name: '全部' })
          this.investmentTypeOptions = res.data.result
        }
      })
    },
    handleChange(val) {
      this.$nextTick(() => {
        let idArr = val
        const areas = val[val.length - 1]
        this.area = areas
        let nameArr = this.$refs['cascader'].presentText.split('/')
        let areaArr = []
        idArr.forEach((item, index) => {
          areaArr.push({ areaId: item, label: nameArr[index] })
        })
        this.$store.commit('SET_INFO', ['changeArea', areaArr])
        this.$refs.cascader.dropDownVisible = false
      })
    },
  },
}
</script>
<style lang="less" scoped>
.containerRouterViewWrap.containerRouterView {
  background: url('../../assets/ezhoubg.png') center center no-repeat;
}
body .chart {
  height: calc(100% - 36px) !important;
  left: 0 !important;
  top: 36px !important;
  bottom: 0 !important;
  padding: 0 10px 10px;
  position: relative;
  right: 0px !important;
}
.suoxiao {
  color: #3affd1 !important;
  background-image: linear-gradient(
    180deg,
    rgba(0, 215, 205, 0) 0%,
    rgba(52, 255, 219, 0.4) 100%
  );
}
.activedImg1 {
  color: #3affd1 !important;
  background-image: url('../../assets/list1.png');
  background-size: 100% 100%;
}
.activedImg2 {
  color: #3affd1 !important;
  background-image: url('../../assets/list2.png');
  background-size: 100% 100%;
}
.containerRouterViewWrap.fullScreen {
  background-color: #31546b;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2000;
  height: calc(100%) !important;
  padding: 0 10px 10px;
}
.chartHeader {
  height: 56px;
  line-height: 56px;
  position: relative;
  &Area {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2001;
  }
  &Date {
    position: absolute;
    top: 18px;
    right: 10px;
    z-index: 2001;
    font-size: 16px;
    line-height: 38px;
    height: 32px;
    color: #fff;
    span {
      color: #01d0fe;
      font-size: 24px;
      cursor: pointer;
    }
    .currentDate {
      margin-top: -6px;
    }
    .fullScreenIcon {
      width: 24px;
      height: 24px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
    }
    .quanping {
      background: url('../../../static/img/eZhou/quanping.png') no-repeat;
      background-size: 100% 100%;
    }
  }

  .chartHeaderMenu {
    width: 100%;
    text-align: center;
    &List {
      display: inline-block;
      width: 116px;
      height: 32px;
      line-height: 32px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }
  }
}

.suoxiao {
  background: url('../../../static/img/eZhou/suoxiao.png') no-repeat;
  background-size: 100% 100%;
}

.chartHeaderAreaFullScreen {
  position: absolute;
  top: 26px;
}
.choseArea {
  z-index: 2005;
  margin-left: 12px;
  margin-top: 6px;
  /deep/ .el-cascader,
  /deep/ .el-select {
    height: 28px;
    line-height: 28px;
    .el-input {
      height: 28px;
      line-height: 28px;
      .el-input__inner {
        width: 201px;
        height: 33px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #0deff4;
        line-height: 86px;
        border: 1px solid #00f6ff;
        background: linear-gradient(
          0deg,
          rgba(3, 114, 121, 0) 0%,
          rgba(1, 82, 104, 0) 100%
        );
        opacity: 0.5;
        border-radius: 6px;
      }
    }
  }
  /deep/.el-input__suffix {
    top: 0 !important;
    height: 28px !important;
    line-height: 28px;
    .el-input__icon {
      height: 37px !important;
      line-height: 28px;
      color: #0deff4;
    }
  }
}
.chartHeaderFullScreen {
  height: 70px;
  position: relative;
  .chartHeaderArea {
    position: absolute;
    line-height: 56px;
    top: 35px;
    left: 0;
    height: 32px;
    z-index: 2001;
  }
  .chartHeaderDate {
    position: absolute;
    line-height: 32px;
    top: 32px;
    right: 15px;
    height: 32px;
    font-family: Digital-7 Mono;
    font-weight: normal;
    font-size: 16px;
    color: #fff;
    span {
      color: #01d0fe;
      font-size: 24px;
    }
    .fullScreenIcon {
      width: 24px;
      height: 24px;
      display: inline-block;
      text-align: center;
    }
  }
  .chartHeaderDateFullScreen {
    position: absolute;
    line-height: 32px;
    top: 32px;
    right: 9px;
    height: 32px;
    // z-index: 2001;
    font-size: 16px;
    color: #fff;
    span {
      color: #01d0fe;
      font-size: 24px;
    }
    .currentDate {
      margin-top: -4px;
    }
    .fullScreenIcon {
      width: 24px;
      height: 24px;
      display: inline-block;
      text-align: center;
    }
  }
  .chartHeaderMenu {
    width: 34%;
    position: absolute;
    line-height: 32px;
    top: 35px;
    left: 0;

    height: 32px;
    z-index: 2001;
    font-size: 16px;
    color: #fff;
    &List {
      cursor: pointer;
      display: inline-block;
      width: 32%;
      height: 32px;
      line-height: 32px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      position: relative;
    }
  }
  .chartHeaderTitle {
    width: 100%;
    text-align: center;
    height: 115px;
    letter-spacing: 0.96px;
    line-height: 58px;
    font-weight: bold;
    font-size: 28px;
    color: #fff;
    background: url('../../assets/screenBgeZhou.png') no-repeat;
    background-size: 100% 100%;
    .eZhouTitle {
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
@media screen and (max-width: 1366px) {
  .chartHeaderTitle {
    font-size: 18px !important;
  }
  .chartHeaderMenuListBox {
    width: 30% !important;
    font-size: 14px !important;
    .chartHeaderMenuList {
      width: 30% !important;
      font-size: 14px !important;
    }
  }
  .chartHeaderDate {
    font-size: 32px !important;
    span {
      font-size: 32px;
      font-family: Digital-7 Mono;
      font-weight: normal;
      color: #01d0fe;
      line-height: 24px;
    }
  }
  /deep/ .el-input {
    .el-input__inner {
      width: 130px !important;
    }
  }

  .chartHeaderMenu {
    width: 100%;
    text-align: center;
    &List {
      width: 90px !important;
      font-size: 13px !important;
    }
  }
}
@media screen and (max-width: 1070px) {
  .chartHeaderTitle {
    font-size: 18px !important;
  }
  .chartHeaderMenuListBox {
    width: 30% !important;
    font-size: 14px !important;
    .chartHeaderMenuList {
      width: 30% !important;
      font-size: 14px !important;
    }
  }
}
</style>
<!--请勿删除，就是两个style -->
<style lang="less">
.currentCascaderStyle {
  background: #132b46;
  border: 1px solid #00f6ff;
  opacity: 0.9;
  .el-cascader-menu__wrap.el-scrollbar__wrap {
    margin-bottom: -9px !important;
  }
  .popper__arrow {
    display: none !important;
  }
}
</style>
